<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
<script>
  /*
  function fn(){
    return 123
  }
  console.log(fn())//123
  */
  //js执行代码顺序
  //同步>异步
  /*
  function fn(){
    setTimeout(() => {
      return 123
    }, 0)
    // return undefined
  }
  console.log(fn())
  */
  // 异步函数
  // 用途:用来接受异步的执行结果
  // 特征:以参数的形式传一个函数到另外一个函数里面执行,并接受结果
  /*
  function fn(callback){
    setTimeout(() => {
      // return 123
      callback(123)
    }, 0)
    // return undefined
  }
  // fn(function(result){
  //   console.log(result)
  // })
  fn(result=>{
    console.log(result)
  })
  */
  //回调地狱
  //存在多层嵌套
  /*
  fn(data1=>{
    console.log(data1)
    fn(data2=>{
      console.log(data2)
      fn(data3=>{
        console.log(data3)
      })
    })
  })
  */
  //回顾promise语法
  /*
  let p = new Promise((resolve,reject)=>{
    setTimeout(() => {
      // resolve(123)
      reject({status:500,message:'报错'})
    }, 0)
  })
  p.then((data)=>{
    console.log(data)
  }).catch((error)=>{
    console.log(error)
  })
  */
  //封装promise
  function axios() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(123)
        // reject({status:500,message:'报错'})
      }, 0)
    })
  }

  /*
  axios({url:'/url1'}).then((data)=>{
    console.log(data)
    axios({url:'/url2'}).then((data)=>{
      console.log(data)
      axios({url:'/url3'}).then((data)=>{
        console.log(data)
      })
    })
  })
  */
  // 用链式调用解决回调地狱
  // $('#box').text('1123').css({fontSize: '12px'})
  /*
  axios({url:'/url1'}).then((data1)=>{
    console.log(data1)
    return axios({url:'/url2'})
  }).then((data2)=>{
    return axios({url:'/url3'})
  }).then((data3)=>{
    console.log(data3)
  })
  */
  // 用async和await简化代码,简化promise接收,异步函数简化登录
  async function fn() {
    let data1 = await axios({ url: '/url1' })
    console.log(data1)
    let data2 = await axios({ url: '/url2' })
    console.log(data2)
    let data3 = await axios({ url: '/url3' })
    console.log(data3)
  }

  fn()
</script>
</html>
